<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>CMS 后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.css" rel="stylesheet">
    <style>
        /* 左侧折叠菜单 */
        #sideMenu {width: 250px; min-height: 100vh; background: #2c3e50; transition: .3s; position: fixed; z-index: 1000;}
        #sideMenu.collapsed {width: 70px;}
        #sideMenu .nav-link {color: #ecf0f1; padding: 12px 20px; border-left: 3px solid transparent;}
        #sideMenu .nav-link:hover {background: #34495e; color: #fff; border-left-color: #3498db;}
        #sideMenu .nav-link.active {background: #34495e; color: #fff; border-left-color: #3498db;}
        #sideMenu .nav-link i {width: 20px; text-align: center; margin-right: 10px;}
        #mainWrapper {margin-left: 250px; transition: .3s; min-height: 100vh; background: #f8f9fa;}
        #mainWrapper.collapsed {margin-left: 70px;}
        #topNav {background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); padding: 15px 20px;}
        .stat-card {border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,.1); transition: transform .2s;}
        .stat-card:hover {transform: translateY(-2px);}
        .quick-action {background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,.1);}
        .quick-action-btn {background: linear-gradient(45deg, #667eea, #764ba2); color: white; border: none; border-radius: 8px; padding: 10px 15px;}
        .system-info {background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,.1);}
        .recent-article {border-left: 4px solid #3498db; background: #fff;}
        .dashboard-section {margin-bottom: 30px;}
    </style>
</head>
<body>
<!-- 左侧菜单 -->
<nav id="sideMenu" class="bg-dark">
    <div class="p-3 text-center border-bottom border-dark">
        <h5 class="text-white mb-0 d-none d-lg-inline">CMS 控制台</h5>
        <button id="toggleMenu" class="btn btn-sm btn-outline-light mt-2"><i class="bi bi-list"></i></button>
    </div>
    <ul class="nav flex-column mt-3">
        <li class="nav-item">
            <a class="nav-link active" href="{:url('index/index')}">
                <i class="bi bi-speedometer2"></i> <span>控制面板</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{:url('article/index')}">
                <i class="bi bi-file-text"></i> <span>文章管理</span>
                <span class="badge bg-primary float-end">{$panel.article}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{:url('category/index')}">
                <i class="bi bi-folder"></i> <span>栏目管理</span>
                <span class="badge bg-success float-end">{$panel.category}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{:url('config/index')}">
                <i class="bi bi-gear"></i> <span>系统配置</span>
                <span class="badge bg-info float-end">{$panel.config}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{:url('seo_rule/index')}">
                <i class="bi bi-search"></i> <span>SEO 规则</span>
                <span class="badge bg-warning float-end">{$panel.seo_rule}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{:url('link/index')}">
                <i class="bi bi-link-45deg"></i> <span>友情链接</span>
                <span class="badge bg-secondary float-end">{$panel.link}</span>
            </a>
        </li>
        <li class="nav-item mt-4">
            <a class="nav-link text-warning" href="{:url('clear')}" onclick="return confirm('确定清空全部缓存？')">
                <i class="bi bi-trash"></i> <span>清空缓存</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-info" href="{:url('welcome')}">
                <i class="bi bi-info-circle"></i> <span>系统信息</span>
            </a>
        </li>
    </ul>
</nav>

<!-- 右侧主体 -->
<div id="mainWrapper">
    <!-- 顶部栏 -->
    <nav id="topNav" class="d-flex justify-content-between align-items-center">
        <div>
            <h4 class="mb-0 text-dark"><i class="bi bi-speedometer2 me-2"></i>控制面板</h4>
        </div>
        <div class="d-flex align-items-center">
            <span class="me-3 text-muted">欢迎，{$admin.username}</span>
            <div class="btn-group">
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="refreshStats()">
                    <i class="bi bi-arrow-clockwise"></i> 刷新
                </button>
                <a href="{:url('login/logout')}" class="btn btn-outline-danger btn-sm">
                    <i class="bi bi-box-arrow-right"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container-fluid p-4">
        <!-- 统计面板 -->
        <div class="dashboard-section">
            <h5 class="mb-3"><i class="bi bi-bar-chart me-2"></i>数据统计</h5>
            <div class="row g-4">
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="stat-card bg-primary text-white p-3 text-center">
                        <div class="h2 fw-bold">{$panel.article}</div>
                        <div class="small">已发布文章</div>
                        <div class="mt-2 small opacity-75">
                            <span class="badge bg-light text-dark">草稿: {$panel.article_draft}</span>
                            <span class="badge bg-light text-dark">回收站: {$panel.article_trash}</span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="stat-card bg-success text-white p-3 text-center">
                        <div class="h2 fw-bold">{$panel.category}</div>
                        <div class="small">栏目数量</div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="stat-card bg-info text-white p-3 text-center">
                        <div class="h2 fw-bold">{$panel.link}</div>
                        <div class="small">友情链接</div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="stat-card bg-warning text-white p-3 text-center">
                        <div class="h2 fw-bold">{$panel.config}</div>
                        <div class="small">系统配置</div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="stat-card bg-secondary text-white p-3 text-center">
                        <div class="h2 fw-bold">{$panel.seo_rule}</div>
                        <div class="small">SEO规则</div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="stat-card bg-dark text-white p-3 text-center">
                        <div class="h2 fw-bold" id="totalVisits">0</div>
                        <div class="small">总访问量</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4 mt-2">
            <!-- 快捷操作 -->
            <div class="col-lg-6">
                <div class="quick-action">
                    <h6 class="mb-3"><i class="bi bi-lightning me-2"></i>快捷操作</h6>
                    <div class="row g-2">
                        <div class="col-6">
                            <a href="{:url('article/add')}" class="btn quick-action-btn w-100 mb-2">
                                <i class="bi bi-plus-circle"></i> 写文章
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{:url('category/add')}" class="btn quick-action-btn w-100 mb-2">
                                <i class="bi bi-folder-plus"></i> 添栏目
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{:url('config/add')}" class="btn quick-action-btn w-100 mb-2">
                                <i class="bi bi-gear"></i> 加配置
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{:url('link/add')}" class="btn quick-action-btn w-100 mb-2">
                                <i class="bi bi-link"></i> 加友链
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统信息 -->
            <div class="col-lg-6">
                <div class="system-info">
                    <h6 class="mb-3"><i class="bi bi-pc me-2"></i>系统信息</h6>
                    <div class="row small text-muted">
                        <div class="col-6 mb-2">操作系统: {$system_info.os}</div>
                        <div class="col-6 mb-2">PHP版本: {$system_info.php_version}</div>
                        <div class="col-6 mb-2">ThinkPHP: {$system_info.thinkphp_version}</div>
                        <div class="col-6 mb-2">MySQL: {$system_info.mysql_version}</div>
                        <div class="col-6 mb-2">上传限制: {$system_info.upload_max_filesize}</div>
                        <div class="col-6 mb-2">磁盘空间: {$system_info.disk_free_space}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新文章 -->
        <div class="dashboard-section mt-4">
            <h5 class="mb-3"><i class="bi bi-clock-history me-2"></i>最新文章</h5>
            <div class="row g-3">
                {volist name="latest_articles" id="article"}
                <div class="col-md-6 col-lg-4">
                    <div class="recent-article p-3 rounded">
                        <h6 class="mb-2 text-truncate">{$article.title}</h6>
                        <div class="d-flex justify-content-between text-muted small">
                            <span>{$article.publish_time|date='Y-m-d'}</span>
                            <span>点击: {$article.hits}</span>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
        </div>

        <!-- 系统状态 -->
        <div class="dashboard-section mt-4">
            <h5 class="mb-3"><i class="bi bi-activity me-2"></i>实时状态</h5>
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="bg-light p-3 rounded text-center">
                        <div class="h5 mb-1" id="currentTime">--:--:--</div>
                        <div class="small text-muted">当前时间</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="bg-light p-3 rounded text-center">
                        <div class="h5 mb-1" id="memoryUsage">-- MB</div>
                        <div class="small text-muted">内存使用</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="bg-light p-3 rounded text-center">
                        <div class="h5 mb-1" id="serverUptime">--</div>
                        <div class="small text-muted">运行时间</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="bg-light p-3 rounded text-center">
                        <div class="h5 mb-1" id="onlineUsers">0</div>
                        <div class="small text-muted">在线用户</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // 菜单折叠
    document.getElementById('toggleMenu').onclick = function () {
        document.getElementById('sideMenu').classList.toggle('collapsed');
        document.getElementById('mainWrapper').classList.toggle('collapsed');
        this.querySelector('i').classList.toggle('bi-list');
        this.querySelector('i').classList.toggle('bi-x');
    };

    // 更新当前时间
    function updateClock() {
        const now = new Date();
        document.getElementById('currentTime').textContent = 
            now.toLocaleTimeString('zh-CN');
    }
    setInterval(updateClock, 1000);
    updateClock();

    // 刷新统计信息
    async function refreshStats() {
        try {
            const response = await fetch("{:url('status')}");
            const data = await response.json();
            document.getElementById('memoryUsage').textContent = data.memory_usage;
            document.getElementById('serverUptime').textContent = data.uptime;
        } catch (error) {
            console.error('刷新状态失败:', error);
        }
    }

    // 模拟在线用户数（实际项目中应从服务器获取）
    function updateOnlineUsers() {
        const users = Math.floor(Math.random() * 10) + 1;
        document.getElementById('onlineUsers').textContent = users;
    }

    // 模拟总访问量
    document.getElementById('totalVisits').textContent = 
        Math.floor(Math.random() * 1000) + 1000;

    // 初始化
    refreshStats();
    updateOnlineUsers();
    setInterval(refreshStats, 30000); // 每30秒刷新一次
    setInterval(updateOnlineUsers, 60000); // 每60秒更新在线用户

    // 页面加载完成后的操作
    document.addEventListener('DOMContentLoaded', function() {
        // 添加页面加载动画
        const loadingEl = document.createElement('div');
        loadingEl.className = 'position-fixed top-0 start-0 w-100 h-100 bg-white d-flex align-items-center justify-content-center';
        loadingEl.style.zIndex = '9999';
        loadingEl.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div>';
        document.body.appendChild(loadingEl);
        
        setTimeout(() => {
            loadingEl.remove();
        }, 500);
    });
</script>
</body>
</html>